<template>
  <div>
    <div class="last">
      <div class="top"></div>
      <!-- 中间内容部分 -->
      <img class="leftImg" src="../assets/images/prologue_img01.png" alt="" />
      <img class="tit" src="../assets/images/t_prologue.png" alt="" />
      <div class="jie1">{{ $t("home.jiewei1") }}</div>
      <div class="jie2">{{ $t("home.jiewei2") }}</div>
      <img class="rhome" src="../assets/images/prologue_img02.png" alt="">
      <!-- <div class="text1">
        <img class="txt1" src="../assets/images/prologue_txt01_pc.png" alt="" />
        <img class="img1" src="../assets/images/prologue_img02.png" alt="" />
      </div>
      <div class="text2">
        <img class="img2" src="../assets/images/top_prologue_ss01.jpg" alt="" />
        <img class="txt2" src="../assets/images/prologue_txt02_pc.png" alt="" />
      </div>
      <div class="text3">
        <img class="txt3" src="../assets/images/prologue_txt03_pc.png" alt="" />
        <img class="img3" src="../assets/images/top_prologue_ss02.jpg" alt="" />
      </div> -->
      <div class="top2"></div>
    </div>
    <div class="bgs">
      <div class="bgs1">
        <img src="../assets/images/img08_1_pc.png" alt="" />
      </div>
      <img class="lt" src="../assets/images/img08_2_pc.png" alt="" />
      <img class="rt" src="../assets/images/img08_3_pc.png" alt="" />
      <img class="worf" src="../assets/images/img_wolf01.png" alt="" />
    </div>
    <!-- 主角 -->
    <div class="user">
      <NewScroll class="zbg1" />
      <NewScroll class="zbg2" />
      <NewScroll class="zbg3" />
      <NewScroll class="zbg4" />
      <img class="zhu" src="../assets/images/t_character.png" alt="" />
      <div class="low">
        <p class="fix">※{{ $t("home.kaifa") }}</p>
        <div class="wrap">
          <img
            class="renTxt"
            src="../assets/images/chara_txt01_pc.png"
            alt=""
          />
          <img class="girl" src="../assets/images/chara_img02.png" alt="" />
          <img class="boy" src="../assets/images/chara_img01.png" alt="" />
        </div>
        <div class="wrapR">
          <img class="rt4" src="../assets/images/img10_5_pc.png" alt="" />
          <img class="rTxt" src="../assets/images/chara_txt02_sp.png" alt="" />
          <img class="tp" src="../assets/images/chara_img03.png" alt="" />
          <img class="lp" src="../assets/images/chara_img04.png" alt="" />
        </div>
        <!-- 背景定位图 -->
        <img class="lbg1" src="../assets/images/img11_1_pc.png" alt="" />
        <img class="tr1" src="../assets/images/img11_2_pc.png" alt="" />
        <img class="tr2" src="../assets/images/img11_3_pc.png" alt="" />
        <img class="tr3" src="../assets/images/img11_4_pc.png" alt="" />
        <img class="tr4" src="../assets/images/img11_5_pc.png" alt="" />
        <!-- 背景图右边 -->
        <img class="rbg1" src="../assets/images/img10_1_pc.png" alt="" />
        <img class="rt1" src="../assets/images/img10_2_pc.png" alt="" />
        <img class="rt2" src="../assets/images/img10_3_pc.png" alt="" />
        <img class="rt3" src="../assets/images/img10_4_pc.png" alt="" />
        <img class="cao" src="../assets/images/img10_6_pc.png" alt="" />
      </div>
    </div>
    <div class="fixed">
      <img src="../assets/images/pagetop02.png" alt="" />
      <img @click="go" class="duck" src="../assets/images/pagetop01.png" alt="" />
    </div>
  </div>
</template>

<script>
const NewScroll = () => import("../components/scroll/NewScroll.vue");
export default {
  components: {
    NewScroll,
  },
  methods: {
    go(){
      document.documentElement.scrollTop = 0;
    }
  },
};
</script>

<style lang="less" scoped>
.rhome{
  position: relative;
  bottom: 500px;
  left: 400px;
}
.jie1{
  position: relative;
  left: 100px;
  font-size: 30px;
  width: 600px;
  // height: 400px;
}
.jie2{
  margin-top: 100px;
  // margin-bottom: 50px;
  position: relative;
  left: 600px;
  font-size: 30px;
  width: 800px;
  // height: 400px;
}
.fixed {
  z-index: 100;
  position: relative;
  width: 141px;
  height: 128px;
  right: -1200px;
  top: -100px;
  cursor: pointer;
  img {
    width: 110px;
    position: absolute;
  }
}
.fixed:hover {
  animation: jump 1s;
}
@keyframes jump {
  15% {
    top: -100px;
  }
  30% {
    top: -110px;
  }
  45% {
    top: -100px;
  }
  60% {
    top: -110px;
  }
  75% {
    top: -100px;
  }
}
.fix {
  margin: 30px 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #2e8419;
}
.user {
  position: relative;
  .zbg1 {
    z-index: -10;
    position: absolute;
    top: 0;
  }
  .zbg2 {
    z-index: -10;
    position: absolute;
    top: 300px;
  }
  .zbg3 {
    z-index: -10;
    position: absolute;
    bottom: 0;
  }
  .zbg4 {
    z-index: -10;
    position: absolute;
    top: 700px;
  }
}
.zhu {
  margin: 150px 0 0;
}
.low {
  margin: 50px auto 0;
  width: 1240px;
  height: 1000px;
  background: url("../assets/images/character_base.png") no-repeat;
  .rbg1 {
    z-index: -2;
    position: relative;
    left: 650px;
    bottom: 4500px;
  }
  .rt1 {
    z-index: -2;
    position: relative;
    left: 650px;
    bottom: 5300px;
  }
  .rt2 {
    z-index: -2;
    position: relative;
    left: 680px;
    bottom: 6100px;
  }
  .lbg1 {
    z-index: -2;
    position: relative;
    left: -750px;
    bottom: -300px;
  }
  .tr1 {
    z-index: -2;
    position: relative;
    left: -100px;
    bottom: 580px;
  }
  .tr3 {
    z-index: -2;
    position: relative;
    left: -720px;
    bottom: 2280px;
  }
  .tr4 {
    z-index: -2;
    position: relative;
    left: -700px;
    bottom: 3110px;
  }
  .wrap {
    width: 50%;
    position: relative;
    .renTxt {
      position: absolute;
      left: 100px;
      top: 100px;
    }
    .girl {
      position: absolute;
      left: 100px;
      top: 250px;
    }
    .boy {
      position: absolute;
      right: 0;
      top: 80px;
    }
  }
  .wrapR {
    width: 50%;
    position: relative;
    left: 50%;
    .rTxt {
      z-index: 5;
      position: absolute;
      right: 90px;
      top: 100px;
    }
    .tp {
      z-index: 5;
      position: absolute;
      right: 90px;
      top: 190px;
    }
    .lp {
      z-index: 5;
      position: absolute;
      right: 90px;
      top: 450px;
    }
    .rt4 {
      z-index: -1;
      position: absolute;
      left: 110px;
      bottom: -550px;
    }
  }
}
.last {
  margin: 0 auto;
  position: relative;
  min-width: 1200px;
  background: url("../assets/images/bg_pattern_brick.png");
  @media screen and (max-width: 420px) {
    width: 400px;
    height: 100%;
    .leftImg {
      width: 200px;
    }
    .tit {
      position: relative;
      left: -400px;
      width: 400px;
      margin: 50px auto 30px !important;
    }
    .text1 {
      width: 400px;
      height: 400px;
    }
  }
  .leftImg {
    position: absolute;
    left: -0;
    top: -80px;
  }
  .tit {
    margin: 100px auto 50px;
  }
  .text1 {
    .txt1 {
      position: relative;
      top: -130px;
      @media screen and (max-width: 420px) {
        top: 0;
        width: 350px;
        height: 75px;
      }
    }
    .img1 {
      position: relative;
      top: -50px;
      right: -200px;
      @media screen and (max-width: 420px) {
        top: 50px;
        right: 0;
        width: 250px;
        height: 150px;
      }
    }
  }
  .text2 {
    @media screen and (max-width: 420px) {
      margin: 150px auto;
      img {
        // height: 300px;
        width: 375px;
      }
    }
    .txt2 {
      position: relative;
      top: -180px;
      @media screen and (max-width: 420px) {
        width: 350px;
        top: -280px;
        left: -600px;
      }
    }
    .img2 {
      margin: 0 auto;
      position: relative;
      top: -0;
      left: -50px;
      border-radius: 15px;
      @media screen and (max-width: 420px) {
        width: 400px;
        left: -218px;
      }
    }
  }
  .text3 {
    margin-top: 50px;
    padding-bottom: 150px;
    @media screen and (max-width: 420px) {
      margin: 150px auto;
      img {
        // height: 300px;
        width: 375px;
      }
    }
    .txt3 {
      position: relative;
      top: -100px;
      @media screen and (max-width: 420px) {
        margin-bottom: 30px;
        width: 250px;
        // top: -280px;
        left: -225px;
      }
    }
    .img3 {
      position: relative;
      border-radius: 15px;
      right: -160px;
      @media screen and (max-width: 420px) {
        width: 400px;
        margin: 0 auto;
        top: 150px;
        left: -516px;
      }
    }
  }
}
.top {
  width: 100%;
  height: 20px;
  background: url("../assets/images/line_b_top.png");
}
.top2 {
  width: 100%;
  height: 20px;
  background: url("../assets/images/line_b_top.png");
  transform: rotate(180deg);
}
.bgs {
  margin: 0 auto;
  width: 1200px;
  position: relative;
  .bgs1 {
    position: absolute;
    left: -220px;
    top: -155px;
  }
  .lt {
    position: absolute;
    left: -200px;
    top: -150px;
  }
  .rt {
    position: absolute;
    left: -200px;
    top: -150px;
  }
  .worf {
    position: absolute;
    right: -50px;
    top: -120px;
  }
}
</style>>